<template>
  <page-header-wrapper>
    <page-tab-list>
      <a-form-model class="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="商城二维码">
          <img :src="data.qrcode_url" alt="" class="ewm" />
        </a-form-model-item>
        <a-form-model-item label="商城H5地址">
          <div class="flex">
            <a-input class="inp" disabled :value="data.url"></a-input>
            <span @click="copy">复制</span>
          </div>
          <div class="tip">独立域名设置方法：将域名记录解析类型选择【URL类型】，然后记录值填写当前商城H5的域名</div>
        </a-form-model-item>
      </a-form-model>
    </page-tab-list>
  </page-header-wrapper>
</template>
<script>
import { getStoreInfo } from '@/api/setting/wechatConfig'

export default {
  name: 'saasChannelH5',
  components: {},
  data() {
    return {
      data: {
        url: '',
        qrcode_url: '',
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    }
  },

  async created() {
    const res = await getStoreInfo()
    if (!res.code) this.data = res.h5
  },

  methods: {
    copy() {
      this.$copyText(this.data.url)
        .then(() => {
          this.$message.success('复制成功')
        })
        .catch(() => {
          this.$message.error('复制失败')
        })
    },
  },
}
</script>
<style lang="less" scoped>
.form {
  margin: 30px 0;
}

.ewm {
  width: 200px;
  height: 200px;
}

.flex {
  display: flex;

  .inp {
    flex: 1;
    overflow: hidden;
  }

  span {
    margin-left: 20px;
    color: #2593fc;
    cursor: pointer;
  }
}
</style>
